<?php
$p = \Yii::$app->controller->module->templateAsset."/shuimomeihua/";
?>

 
   
<style>
  /*
* @Author: lfz
* @Date:   2016-07-09 15:16:50
* @Last Modified by:   lfz
* @Last Modified time: 2016-07-09 15:19:21
*/

*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

body,html,.main-body
{
    background-color: black;
    height: 100%;
}

#container
{
    width: 500px;
    height: 100%;
    position: absolute;
    overflow: hidden;
}
#container>div,#container > img 
{
    position: absolute;
}
#shuzhi
{
    left: 175px;
    top: 35px;
    -webkit-transform-origin: 100% 90%;
    -webkit-animation: shuzhi 3s linear infinite alternate;
    -webkit-transform: rotate(-5deg);
    width: 337px;
    height: 131px;
}
#san
{
    -webkit-transform: scale(.5);
    left: 100px;
    top: 110px;
    width: 300px;
    height: 300px;
    position: absolute;
}
#yun1
{
    left: -500px;
    top: -300px;
    -webkit-animation: yun1 40s linear infinite;
    opacity: 0;
}
#yun2
{
    left: -303px;
    top: 232px;
    -webkit-animation: yun1 25s 1s linear infinite;
    opacity: 0;
}
#yun3
{
    left: -437px;
    top: 308px;
    -webkit-animation: yun1 22s 7s linear infinite;
    opacity: 0;
}
#dian
{
    left: 127px;
    top: 125px;
    position: absolute;
}
#yusan
{
    position: absolute;
    -webkit-animation: yusan 15s linear infinite;
}
#wordbg
{
    left: 28px;
    top: 60px;
    -webkit-transform: scale(0.6);
    position: absolute;
    opacity: 0;
    width: 444px;
    height: 706px;
}
#worddiv
{
    width: 500px;
    height: 300px;
    overflow: hidden;
}
#div1h
{
/*    left: 32px;
    top: 253px;
    width: 436px;
    height: 300px;
    border-top: 5px solid #fff;
    border-bottom: 5px solid #fff;
    overflow: hidden;
*/}
.divh
{
    left: 32px;
    top: 253px;
    width: 436px;
    height: 300px;
    border-top: 7px solid #fff;
    border-bottom: 7px solid #fff;
    overflow: hidden;
    /*opacity: 0.3;*/
    opacity: 0;
    position: absolute;
}
.mask1_1h
{
    left: -350px;
    top: 253px;
    width: 350px;
    height: 300px;
    border-top: 7px solid #fff;
    border-bottom: 7px solid #fff;
    overflow: hidden;
    /*background-color: #fff;*/
    position: absolute;
}
.mask1_2h
{
    left: 436px;
    top: 253px;
    width: 350px;
    height: 300px;
    border-top: 7px solid #fff;
    border-bottom: 7px solid #fff;
    overflow: hidden;
    /*background-color: #fff;*/
    position: absolute;
}
.mask1_1v
{
    left: 0px;
    top: 555px;
    width: 370px;
    height: 400px;
    border-left: 5px solid #fff;
    border-right: 5px solid #fff;
    overflow: hidden;
    background-color: #fff;
    position: absolute;
}
.mask1_2v
{
    left: 0px;
    top: -400px;
    width: 370px;
    height: 400px;
    border-left: 5px solid #fff;
    border-right: 5px solid #fff;
    overflow: hidden;
    background-color: #fff;
    position: absolute;
}
.mask2_1h
{
    left: -436px;
    top: 253px;
    width: 436px;
    height: 300px;
    border-top: 7px solid #fff;
    border-bottom: 7px solid #fff;
    overflow: hidden;
    /*background-color: #fff;*/
    position: absolute;
}
.mask2_2h
{
    left: 436px;
    top: 253px;
    width: 436px;
    height: 300px;
    border-top: 7px solid #fff;
    border-bottom: 7px solid #fff;
    overflow: hidden;
    /*background-color: #fff;*/
    position: absolute;
}
.mask2_1v
{
    left: 0px;
    top: 555px;
    width: 370px;
    height: 555px;
    border-left: 5px solid #fff;
    border-right: 5px solid #fff;
    border-bottom: 5px solid #fff;
    overflow: hidden;
    /*background-color: #fff;*/
    position: absolute;
}
.mask2_2v
{
    left: 0px;
    top: -555px;
    width: 370px;
    height: 555px;
    border-left: 5px solid #fff;
    border-right: 5px solid #fff;
    border-top: 5px solid #fff;
    overflow: hidden;
    /*background-color: #fff;*/
    position: absolute;
}
.maskimg1_1h
{
    left: 350px;
    position: absolute;
    opacity: 0.7;
}
.maskimg1_2h
{
    left: -436px;
    position: absolute;
    opacity: 0.7;
}
.maskimg1_1v
{
    top: -555px;
    left: -5px;
    position: absolute;
    width: 370px;
    height: 400px;
    border-left: 5px solid #fff;
    border-right: 5px solid #fff;
    opacity: 0.7;
}
.maskimg1_2v
{
    top: 400px;
    left: -5px;
    position: absolute;
    width: 370px;
    height: 400px;
    border-left: 5px solid #fff;
    border-right: 5px solid #fff;
    opacity: 0.7;
}
.maskimg2_1h
{
    left: 436px;
    position: absolute;
    opacity: 1;
}
.maskimg2_2h
{
    left: -436px;
    position: absolute;
    opacity: 1;
}
.maskimg2_1v
{
    top: -555px;
    left: -5px;
    position: absolute;
    width: 370px;
    height: 555px;
    border-left: 5px solid #fff;
    border-right: 5px solid #fff;
    opacity: 1;
}
.maskimg2_2v
{
    top: 555px;
    left: -5px;
    position: absolute;
    width: 370px;
    height: 555px;
    border-left: 5px solid #fff;
    border-right: 5px solid #fff;
    opacity: 1;
}
.divv
{
    left: 65px;
    top: 130px;
    width: 370px;
    height: 555px;
    border: 5px solid #fff;
    background-color: #fff;
    overflow: hidden;
    opacity: 0;
    position: absolute;
}
#jiantou1h
{
    left: -500px;
    top: 0px;
    position: absolute;
    opacity: 0.3;
}
#jiantou2h
{
    left: 500px;
    position: absolute;
    top: 0px;
    opacity: 0.3;
    -webkit-transform: scale(-1,1);
}
#jiantou1v
{
    position: absolute;
    top: 667px;
    -webkit-transform: rotate(-90deg);
    height: 365px;
    left: -114px;
    opacity: 0.3;
}
#jiantou2v
{
    position: absolute;
    top: -483px;
    -webkit-transform: rotate(90deg);
    height: 365px;
    left: -114px;
    opacity: 0.3;
}
#huaban
{
    position: absolute;
    left: -1px;
    top: 10px;
    -webkit-animation: flower 10s linear infinite
}
</style>
    <style type="text/css">
@-webkit-keyframes shuzhi
{
    from  {-webkit-transform: rotate(-4deg);}
    to    {-webkit-transform: rotate(1deg);}
}
@-webkit-keyframes yun1
{
    0%  {-webkit-transform: translate(0px,0px);opacity: 0}
    15% {-webkit-transform: translate(168px,0px);opacity: 1}
    85% {-webkit-transform: translate(952px,0px);opacity: 1}
    100%{-webkit-transform: translate(1120px);opacity: 0}
}
@-webkit-keyframes san_in
{
    0%  {-webkit-transform: scale(0.5);}
    33% {-webkit-transform: scale(1);}
    100%{-webkit-transform: translate(0px,370px) scale(1);}
}
@-webkit-keyframes yusan
{
    from  {-webkit-transform: rotate(0deg);}
    to    {-webkit-transform: rotate(360deg);}
}

@-webkit-keyframes worddiv
{
    from  {height: 300px;}
    to    {height: 800px;}
}
@-webkit-keyframes fadein
{
    from  {opacity: 0}
    to    {opacity: 1}
}
@-webkit-keyframes divfadein
{
    from  {opacity: 0;-webkit-transform: scale(1,0.9);}
    to    {opacity: 0.3;-webkit-transform: scale(1,0.9);}
}
@-webkit-keyframes divfadeinv
{
    from  {opacity: 0;-webkit-transform: scale(0.9,1);}
    to    {opacity: 0.3;-webkit-transform: scale(0.9,1);}
}
@-webkit-keyframes fadeout
{
    from  {opacity: 1}
    to    {opacity: 0}
}
@-webkit-keyframes wordbg_out
{
    from  {-webkit-transform: scale(0.6);opacity: 1}
    to    {-webkit-transform: scale(1);opacity: 1}
}
@-webkit-keyframes san_down
{
    from  {-webkit-transform: translate(0px,370px) scale(1);}
    to    {-webkit-transform: translate(0px,560px) scale(1);}
}
@-webkit-keyframes jiantou_toright
{
    from  {-webkit-transform: translate(0px,0px);}
    to    {-webkit-transform: translate(1000px,0px);}
}
@-webkit-keyframes jiantou_toleft
{
    from  {-webkit-transform: translate(0px,0px) scale(-1,1);}
    to    {-webkit-transform: translate(-1000px,0px) scale(-1,1);}
}
@-webkit-keyframes jiantou_todown
{
    from  {-webkit-transform: translate(0px,0px) rotate(90deg);}
    to    {-webkit-transform: translate(0px,1140px) rotate(90deg);}
}
@-webkit-keyframes jiantou_toup
{
    from  {-webkit-transform: translate(0px,0px) rotate(-90deg);}
    to    {-webkit-transform: translate(0px,-1140px) rotate(-90deg);}
}
@-webkit-keyframes flower
{
    from  {-webkit-transform: translate(0px,0px) rotate(0deg);}
    to    {-webkit-transform: translate(250px,800px) rotate(150deg);}
}
@-webkit-keyframes divmask_1
{
    from  {-webkit-transform: translate(0px,0px) scale(1,1.1);}
    to    {-webkit-transform: translate(890px,0px) scale(1,1.1);}
}
@-webkit-keyframes divmask-1
{
    from  {-webkit-transform: translate(0px,0px) scale(1,1.1);}
    to    {-webkit-transform: translate(500px,0px) scale(1,1.1);}
}
@-webkit-keyframes divmask_2
{
    from  {-webkit-transform: translate(0px,0px);opacity: 0.7;}
    to    {-webkit-transform: translate(-890px,0px);opacity: 0.7;}
}
@-webkit-keyframes divmask-2
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1;}
    to    {-webkit-transform: translate(-500px,0px);opacity: 1;}
}
@-webkit-keyframes mask1h_toright
{
    from  {-webkit-transform: translate(0px,0px) scale(1,1);}
    to    {-webkit-transform: translate(786px,0px) scale(1,1);}
}
@-webkit-keyframes maskimg1h_toright
{
    from  {-webkit-transform: translate(0px,0px) scale(1,1);}
    to    {-webkit-transform: translate(-786px,0px) scale(1,1);}
}
@-webkit-keyframes mask2h_toright
{
    from  {-webkit-transform: translate(0px,0px) scale(1,1);}
    to    {-webkit-transform: translate(436px,0px) scale(1,1);}
}
@-webkit-keyframes maskimg2h_toright
{
    from  {-webkit-transform: translate(0px,0px) scale(1,1);}
    to    {-webkit-transform: translate(-436px,0px) scale(1,1);}
}
@-webkit-keyframes mask1v_toup
{
    from  {-webkit-transform: translate(0px,0px) scale(1);}
    to    {-webkit-transform: translate(0px,-955px) scale(1);}
}
@-webkit-keyframes maskimg1v_toup
{
    from  {-webkit-transform: translate(0px,0px) scale(1);}
    to    {-webkit-transform: translate(0px,955px) scale(1);}
}
@-webkit-keyframes mask2v_toup
{
    from  {-webkit-transform: translate(0px,0px) scale(1);}
    to    {-webkit-transform: translate(0px,-555px) scale(1);}
}
@-webkit-keyframes maskimg2v_toup
{
    from  {-webkit-transform: translate(0px,0px) scale(1);}
    to    {-webkit-transform: translate(0px,555px) scale(1);}
}


    @-webkit-keyframes zhuan
        {
            0%
            {
                -webkit-transform:rotate(0deg);
            }

            100%
            {
                -webkit-transform:rotate(360deg);
            }
        }


        @-webkit-keyframes aa_out_bounce_left
        {
            0%{
                -webkit-transform:translateX(0)
            }
            20%{
                -webkit-transform:translateX(20px)
            }
            100%{
                -webkit-transform:translateX(-125px)
            }
        }
        @-webkit-keyframes aa_in_bounce_center
        {
            0%{
                opacity:0;
                -webkit-transform:scale(.3)
            }
            50%{
                opacity:1;
                -webkit-transform:scale(1.05)
            }
            70%{
                -webkit-transform:scale(.9)
            }
            100%{
                -webkit-transform:scale(1)
            }
        }
        @-webkit-keyframes jinbi
        {
            from {-webkit-transform: rotateY(0deg);}
            to   {-webkit-transform: rotateY(180deg);}
        }
        .jubao-item
        {
            position: relative;
            float: left;
            width: 360px;
            height: 55px;
            top: 0px;
            font-size: 20px;
            line-height: 55px;
            margin-left: 20px;
            border-bottom: 1px solid #EBEBEB;
        }
        .jubao-radio
        {
            position: absolute;
            right: 10px;
            width: 25px;
            height: 25px;
            top: 20px;
        }

        .jubao-detail
        {
            position: relative;
            float: left;
            width: 360px;
            margin-left: 20px;
        }
        .jubao-detail textarea
        {
            width: 360px;
            height: 80px;
            font-size: 20px;
            resize: none;
            line-height: 40px;
            border: none;
            background-color: #eee;
            border-radius: 10px;
            padding-left: 10px;
        }
        @-webkit-keyframes guangzhu_ani
        {
            from  {-webkit-transform: scale(1);}
            to    {-webkit-transform: scale(1.05);}
        }
        @-webkit-keyframes che_ani
        {
            0%    {-webkit-transform: translate(-20px,0px);opacity: 1}
            8%  {-webkit-transform: translate(100px,0px) scale(0.95,1.05);opacity: 1}
            10%  {-webkit-transform: translate(100px,0px) scale(1,1);opacity: 1}
            12%   {-webkit-transform: translate(100px,0px); opacity: 1}
            14%   {-webkit-transform: translate(100px,0px); opacity: 1}
            16%   {-webkit-transform: translate(100px,0px); opacity: 1}
            18%   {-webkit-transform: translate(100px,0px); opacity: 1}
            20%   {-webkit-transform: translate(100px,0px); opacity: 1}
            45%   {-webkit-transform: translate(100px,0px) scale(0.97,1.03); opacity: 1}
            50%   {-webkit-transform: translate(100px,0px); opacity: 1}
            60%   {-webkit-transform: translate(200px,0px); opacity: 0}
            100%  {-webkit-transform: translate(200px,0px); opacity: 0}
        }
        @-webkit-keyframes che1_ani
        {
            0%    {opacity: 1}
            12%   {opacity: 1}
            14%   {opacity: 0.5}
            16%   {opacity: 1}
            18%   {opacity: 0.5}
            20%   {opacity: 1}
            100%  {opacity: 1}

        }
        @-webkit-keyframes baoming
        {
            0%  {opacity: 0}
            58% {opacity: 0;-webkit-transform: scale(1.4);}
            59% {opacity: 1;-webkit-transform: scale(1.4);}
            70% {opacity: 1;-webkit-transform: scale(0.95);}
            72% {opacity: 1;-webkit-transform: scale(1);}
            80% {opacity: 0.8;-webkit-transform: scale(1.1);}
            88% {opacity: 1;-webkit-transform: scale(1);}
            93% {opacity: 0;-webkit-transform: scale(1.3);}
            100%{opacity: 0}
        }
        @-webkit-keyframes shijia
        {
            0%  {-webkit-transform: rotate(20deg) scale(0.8);opacity: 0}
            10% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
            20% {-webkit-transform: rotate(20deg) scale(0.85);}
            28% {-webkit-transform: rotate(20deg) scale(0.75);}
            38% {-webkit-transform: rotate(20deg) scale(0.85);}
            47% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
            55% {-webkit-transform: rotate(20deg) scale(0.90);opacity: 0}
            100%{opacity: 0}

        }
        @-webkit-keyframes biaozhi_ani
        {
            0%  {opacity: 0}
            10% {opacity: 0}
            20% {opacity: 1}
            45% {opacity: 1}
            55% {opacity: 0}
            100%{opacity: 0}
        }
        #musicinfo
        {
            color: #fff;
            text-shadow: 1px 1px 2px #000;
            font-size: 15px;
            position: fixed;
            left: 432px;
            top: 82px;
            width: 60px;
            height: 20px;
            z-index: 100;
            display: none;
            opacity: 1;
        }
        @-webkit-keyframes heart_beating
        {
            from {opacity: 1;-webkit-transform: scale(1);}
            to   {opacity: 0.8;-webkit-transform: scale(0.8);}
        }
        @-webkit-keyframes heart1_moving
        {
            from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
            to    {opacity: 0;-webkit-transform: translate(-20px,-50px) scale(1.5);}
        }
        @-webkit-keyframes heart2_moving
        {
            from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
            to    {opacity: 0;-webkit-transform: translate(20px,-60px) scale(2);}
        }
        @-webkit-keyframes heart3_moving
        {
            from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
            to    {opacity: 0;-webkit-transform: translate(70px,-40px) scale(2);}
        }
#enddiv
{
    position: absolute;
    width: 500px;
    height: 815px;
    background-color: rgba(0,0,0,0.7);
    z-index: 10000;
    display: none;
    opacity: 0;
}
#title_div
{
    width: 320px;
    height: 200px;
    left: 90px;
    top: 250px;
    color: #fff;
    font-size: 25px;
    position: relative;
    line-height: 45px;
    text-align: center;
    font-family: '寰蒋闆呴粦';
    display:table;
}
#title_line
{
    position: absolute;
    width: 370px;
    height: 2px;
    background-color: #fff;
    top: 415px;
    left: 65px;
}
#reshowbtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(94,159,177,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 74px;
}
#guanzhubtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(185,91,83,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 268px;
}
@-webkit-keyframes fadein
{
    from  {opacity: 0}
    to    {opacity: 1}
}


#container {
}

#yun1 {
}

#yun2 {
}

#yun3 {
}

#worddiv {
    animation: worddiv 3s linear 1s both;
}

#wordbg {
    animation: wordbg_out 1.5s linear both;
}

#pagetitle {
    position: absolute;
    width: 232px;
    height: 269px;
    top: 120px;
    left: 106px;
    font-size: 40px;
    color: rgb(255, 255, 255);
    overflow: hidden;
    transform: scale(1.7);
    animation: fadeout 1s linear 1s both;
}

#titlecontent {
    width: 232px;
    height: 269px;
    vertical-align: middle;
    display: table-cell;
    text-align: center;
    font-size: 30px;
    line-height: 150%;
    color: #0084AC;
}

#div1 {
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    animation: fadeout 0.5s linear 4s both;
}

#div1h {
    display: block;
    animation: divfadein 1s linear 3s both;
}

#img1h {
    position: absolute;
    left: 0px;
    width: 436px;
    height: 327px;
    top: -13.5px;
}

#mask1_1h {
    display: block;
    animation: mask1h_toright 3s linear both;
}

#maskimg1_1h {
    left: 0px;
    top: -13.5px;
    width: 436px;
    height: 327px;
    animation: maskimg1h_toright 3s linear both;
}

#mask2_1h {
    display: block;
    animation: mask2h_toright 1.5s linear 1s both;
}

#maskimg2_1h {
    position: absolute;
    left: 0px;
    top: -13.5px;
    width: 436px;
    height: 327px;
    animation: maskimg2h_toright 1.5s linear 1s both;
}

#div1v {
    display: none;
    animation: divfadeinv 1s linear 3s both;
}

#img1v {
    position: absolute
}

#mask1_1v {
    display: none;
    animation: mask1v_toup 3s linear both;
}

#maskimg1_1v {
    position: absolute;
    animation: maskimg1v_toup 3s linear both;
}

#mask2_1v {
    display: none;
    animation: mask2v_toup 1.5s linear 1s both;
}

#maskimg2_1v {
    position: absolute;
    animation: maskimg2v_toup 1.5s linear 1s both;
}

#div1vline {
    left: 0px;
    top: 0px;
    height: 555px;
    width: 370px;
    border-top-width: 5px;
    border-top-style: solid;
    border-top-color: rgb(255, 255, 255);
    border-bottom-width: 5px;
    border-bottom-style: solid;
    border-bottom-color: rgb(255, 255, 255);
    opacity: 0;
    position: absolute;
    display: none;
    animation: fadein 0.5s linear 2s both;
}

#div2 {
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
}

#div2h {
}

#img2h {
    position: absolute
}

#mask1_2h {
}

#maskimg1_2h {
    position: asbolute
}

#mask2_2h {
}

#maskimg2_2h {
    position: absolute
}

#div2v {
}

#img2v {
    position: absolute
}

#mask1_2v {
}

#maskimg1_2v {
    position: absolute
}

#mask2_2v {
}

#maskimg2_2v {
    position: absolute
}

#div2vline {
    left: 0px;
    top: 0px;
    height: 555px;
    width: 370px;
    border-top-width: 5px;
    border-top-style: solid;
    border-top-color: rgb(255, 255, 255);
    border-bottom-width: 5px;
    border-bottom-style: solid;
    border-bottom-color: rgb(255, 255, 255);
    opacity: 0;
    position: absolute;
    display: none;
}

#san {
    animation: san_down 1.5s linear both;
}

#yusan {
}

#dian {
}

#shuzhi {
}

#huaban {
}

.m1 {
}

.m2 {
    position: absolute;
    width: 232px;
    height: 269px;
    top: 0px;
    left: 0px;
    overflow: hidden;
}

.m3 {
    position: absolute;
    width: 232px;
    height: 269px;
    display: table;
    overflow: hidden;
}

.m6 {
    width: 436px;
    left: 32px;
    top: 0px;
    height: 800px;
    overflow: hidden;
    position: absolute
}

.maskimg1_1h {
}

.maskimg2_1h {
}

.m7 {
    width: 370px;
    left: 65px;
    top: 130px;
    height: 555px;
    overflow: hidden;
    position: absolute
}

.maskimg1_1v {
}

.maskimg2_1v {
}

.m8 {
    width: 436px;
    left: 32px;
    top: 0px;
    height: 800px;
    overflow: hidden;
    position: absolute
}

.maskimg1_2h {
}

.maskimg2_2h {
}

.m9 {
    width: 370px;
    left: 65px;
    top: 130px;
    height: 555px;
    overflow: hidden;
    position: absolute
}

.maskimg1_2v {
}

.maskimg2_2v {
}

.m10 {
    position: absolute
}
</style>

<div id="container">
        <img src="<?=$p?>images/TB23mQOtFXXXXcXXXXXXXXXXXXX_!!1016194477.png">

        <img id="yun1" src="<?=$p?>images/TB2BWoVtFXXXXbNXXXXXXXXXXXX_!!1016194477.png">
        <img id="yun2" src="<?=$p?>images/TB2BWoVtFXXXXbNXXXXXXXXXXXX_!!1016194477.png">
        <img id="yun3" src="<?=$p?>images/TB2BWoVtFXXXXbNXXXXXXXXXXXX_!!1016194477.png">

        <div id="worddiv" >
            <div id="wordbg" >
                <img class="m1" src="<?=$p?>images/TB2_tI4tFXXXXa6XXXXXXXXXXXX_!!1016194477.png">
                <div id="pagetitle" >
                    <div class="m2" >
                        <div class="m3" >
                            <div id="titlecontent" >5</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="div1" >
            <div id="div1h" class="divh" >
                <img id="img1h" >
               </div>

            <div class="m6" >
                <div id="mask1_1h" class="mask1_1h" >
                    <div class="maskimg1_1h">
                        <img id="maskimg1_1h" ></div>
                </div>
                <div id="mask2_1h" class="mask2_1h" >
                    <div class="maskimg2_1h">
                        <img id="maskimg2_1h" ></div>
                </div>
            </div>

            <div id="div1v" class="divv" >
                <img id="img1v" ></div>

            <div class="m7" >
                <div id="mask1_1v" class="mask1_1v" >
                    <div class="maskimg1_1v">
                        <img id="maskimg1_1v" ></div>
                </div>
                <div id="mask2_1v" class="mask2_1v" >
                    <div class="maskimg2_1v">
                        <img id="maskimg2_1v" ></div>
                </div>
                <div id="div1vline" ></div>
            </div>
        </div>

        <div id="div2" >
            <div id="div2h" class="divh">
                <img id="img2h" ></div>

            <div class="m8" >
                <div id="mask1_2h" class="mask1_2h">
                    <div class="maskimg1_2h">
                        <img id="maskimg1_2h" ></div>
                </div>
                <div id="mask2_2h" class="mask2_2h">
                    <div class="maskimg2_2h">
                        <img id="maskimg2_2h" ></div>
                </div>
            </div>

            <div id="div2v" class="divv">
                <img id="img2v" ></div>

            <div class="m9" >
                <div id="mask1_2v" class="mask1_2v">
                    <div class="maskimg1_2v">
                        <img id="maskimg1_2v" ></div>
                </div>
                <div id="mask2_2v" class="mask2_2v">
                    <div class="maskimg2_2v">
                        <img id="maskimg2_2v" ></div>
                </div>
                <div id="div2vline" ></div>
            </div>
        </div>
        <div id="san" >
            <img id="yusan" src="<?=$p?>images/TB2cOw0tFXXXXbcXXXXXXXXXXXX_!!1016194477.png">
            <img id="dian" src="<?=$p?>images/TB21Go2tFXXXXa9XXXXXXXXXXXX_!!1016194477.png"></div>
        <div id="shuzhi">
            <img id="huaban" src="<?=$p?>images/TB254.itFXXXXb1XpXXXXXXXXXX_!!1016194477.png">
            <img class="m10" src="<?=$p?>images/TB2qBwutFXXXXX_XpXXXXXXXXXX_!!1016194477.png" ></div>

    </div>

    <script>

function id(name)
{
    return document.getElementById(name)
}

var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;

var timeout = [];

var allitems = {};

var delaytime=6000;
function id(name)
{
    return document.getElementById(name);
}
function load_images()
{
    creatediv();
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    showtitle();
    canshow = true;

    bl_keepload = 'first';
    step_load();
}

//每次执行加载后5张图片
var bl_keepload = 'first';
var step_loadnum = 5;
function step_load()
{
    var load_num = 0
    //初步加载X张
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
}

function creatediv()
{
    var  divid = ['san','wordbg','worddiv','div1','div2','div1h','div1v','div2h','div2v','div1vline','div2vline','mask1_1h','mask2_1h','maskimg1_1h','maskimg2_1h','mask1_1v','mask2_1v','maskimg1_1v','maskimg2_1v','mask1_2h','mask2_2h','maskimg1_2h','maskimg2_2h','mask1_2v','mask2_2v','maskimg1_2v','maskimg2_2v','img1h','img2h','img1v','img2v'];

    for(var i=0;i<divid.length;i++)
    {
        allitems[divid[i]] = id(divid[i]);
    }

}

function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';
    console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);
    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            distitle();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    distitle();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
   
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);

    if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            distitle();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    distitle();
                },dis_titletime);
        }

    }
}
function showtitle()
{
    allitems['san'].style.webkitAnimation = 'san_in 3s linear both';
    allitems['wordbg'].style.webkitAnimation = 'fadein 1s linear both';
    allitems['worddiv'].style.webkitAnimation = 'worddiv 3s 1s linear both';

    id('pagetitle').style.webkitAnimation = 'fadein 1s 2s linear both';
    id('titlecontent').innerHTML = desc;

    // setTimeout(distitle,4000)
}

function distitle()
{
    id('pagetitle').style.webkitAnimation = 'fadeout 1s 1s linear both';
    allitems['san'].style.webkitAnimation = 'san_down 1.5s linear both';
    allitems['wordbg'].style.webkitAnimation = 'wordbg_out 1.5s linear both';

    show1();
}

function show1()
{
    // return;
    setImage('1');

    id('div2').style.display = 'none';
    id('div1').style.display = 'block';

    allitems['div1h'].style.webkitAnimation = 'divfadein 1s 3s linear both';

    allitems['div1v'].style.webkitAnimation = 'divfadeinv 1s 3s linear both';


    timeout[1] = setTimeout(function()
    {
        allitems['mask1_1h'].style.webkitAnimation = 'mask1h_toright 3s linear both';
        allitems['maskimg1_1h'].style.webkitAnimation = 'maskimg1h_toright 3s linear both';
        allitems['mask2_1h'].style.webkitAnimation = 'mask2h_toright 1.5s 1s linear both';
        allitems['maskimg2_1h'].style.webkitAnimation = 'maskimg2h_toright 1.5s 1s linear both';
        allitems['mask1_1v'].style.webkitAnimation = 'mask1v_toup 3s linear both';
        allitems['maskimg1_1v'].style.webkitAnimation = 'maskimg1v_toup 3s linear both';
        allitems['mask2_1v'].style.webkitAnimation = 'mask2v_toup 1.5s 1s linear both';
        allitems['maskimg2_1v'].style.webkitAnimation = 'maskimg2v_toup 1.5s 1s linear both'; 
        allitems['div1vline'].style.webkitAnimation = 'fadein 0.5s linear 2s both';

        allitems['div1'].style.webkitAnimation = 'fadeout 0.5s 4s linear both';
    },3500)

    timeout[2] = setTimeout(show2,8000)
}

function show2()
{
    setImage('2');

    id('div1').style.display = 'none';
    id('div2').style.display = 'block';

    

    // return;
    // setTimeout(function()
    // {
        allitems['div2h'].style.webkitAnimation = 'divfadein 1.5s linear both';
        allitems['div2v'].style.webkitAnimation = 'divfadeinv 1.5s linear both';
    // },500)

    timeout[3] = setTimeout(function()
    {
        allitems['mask1_2h'].style.webkitAnimation = 'maskimg1h_toright 3s linear both';
        allitems['maskimg1_2h'].style.webkitAnimation = 'mask1h_toright 3s linear both';
        allitems['mask2_2h'].style.webkitAnimation = 'maskimg2h_toright 1.5s 1s linear both';
        allitems['maskimg2_2h'].style.webkitAnimation = 'mask2h_toright 1.5s 1s linear both';
        allitems['mask1_2v'].style.webkitAnimation = 'maskimg1v_toup 3s linear both';
        allitems['maskimg1_2v'].style.webkitAnimation = 'mask1v_toup 3s linear both';
        allitems['mask2_2v'].style.webkitAnimation = 'maskimg2v_toup 1.5s 1s linear both';
        allitems['maskimg2_2v'].style.webkitAnimation = 'mask2v_toup 1.5s 1s linear both'; 
        allitems['div2vline'].style.webkitAnimation = 'fadein 0.5s linear 2s both';

        allitems['div1'].style.webkitAnimation = '';
        allitems['div1v'].style.webkitAnimation = '';
        allitems['div1h'].style.webkitAnimation = '';
        allitems['mask1_1h'].style.webkitAnimation = '';
        allitems['maskimg1_1h'].style.webkitAnimation = '';
        allitems['mask2_1h'].style.webkitAnimation = '';
        allitems['maskimg2_1h'].style.webkitAnimation = '';
        allitems['mask1_1v'].style.webkitAnimation = '';
        allitems['maskimg1_1v'].style.webkitAnimation = '';
        allitems['mask2_1v'].style.webkitAnimation = '';
        allitems['maskimg2_1v'].style.webkitAnimation = ''; 
        allitems['div1vline'].style.webkitAnimation = '';

         allitems['div2'].style.webkitAnimation = 'fadeout 0.8s 4s linear both';

    },2000)


    timeout[4] = setTimeout(show3,7000)

}

function show3()
{
    setImage('1');

    id('div2').style.display = 'none';
    id('div1').style.display = 'block';

   

    // setTimeout(function()
    // {
        allitems['div1h'].style.webkitAnimation = 'divfadein 1.5s linear both';
        allitems['div1v'].style.webkitAnimation = 'divfadeinv 1.5s linear both';
    // },500)

    timeout[5] = setTimeout(function()
    {
        allitems['mask1_1h'].style.webkitAnimation = 'mask1h_toright 3s linear both';
        allitems['maskimg1_1h'].style.webkitAnimation = 'maskimg1h_toright 3s linear both';
        allitems['mask2_1h'].style.webkitAnimation = 'mask2h_toright 1.5s 1s linear both';
        allitems['maskimg2_1h'].style.webkitAnimation = 'maskimg2h_toright 1.5s 1s linear both';
        allitems['mask1_1v'].style.webkitAnimation = 'mask1v_toup 3s linear both';
        allitems['maskimg1_1v'].style.webkitAnimation = 'maskimg1v_toup 3s linear both';
        allitems['mask2_1v'].style.webkitAnimation = 'mask2v_toup 1.5s 1s linear both';
        allitems['maskimg2_1v'].style.webkitAnimation = 'maskimg2v_toup 1.5s 1s linear both'; 
        allitems['div1vline'].style.webkitAnimation = 'fadein 0.5s linear 2s both';

        allitems['div2'].style.webkitAnimation = '';
        allitems['div2v'].style.webkitAnimation = '';
        allitems['div2h'].style.webkitAnimation = '';
        allitems['mask1_2h'].style.webkitAnimation = '';
        allitems['maskimg1_2h'].style.webkitAnimation = '';
        allitems['mask2_2h'].style.webkitAnimation = '';
        allitems['maskimg2_2h'].style.webkitAnimation = '';
        allitems['mask1_2v'].style.webkitAnimation = '';
        allitems['maskimg1_2v'].style.webkitAnimation = '';
        allitems['mask2_2v'].style.webkitAnimation = '';
        allitems['maskimg2_2v'].style.webkitAnimation = ''; 
        allitems['div2vline'].style.webkitAnimation = '';   

         allitems['div1'].style.webkitAnimation = 'fadeout 0.8s 4s linear both'; 
    },2000)

    timeout[6] = setTimeout(show2,7000)
}
function setImage(idname)
{
    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        // console.log(Onload_imgs_url[image_url_index]);
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    if(image_url_index % step_loadnum == 0)
    {
        step_load();
    }
    console.log('setimg:' + Onload_imgs_url[image_url_index]);

    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];
    var div;
    var div1;
    var divname;
    var height;
    var width;

    var maskdiv1;
    var maskdiv1_dev;
    var maskdiv2;
    var maskdiv2_dev;

    if(img_bili > 1)
    {
        divname = idname + 'h';
        div = allitems['div'+idname+'h']
        div1 = allitems['div'+idname+'v']

        maskdiv1 = allitems['mask1_'+idname+'h']
        maskdiv1_dev = allitems['mask1_'+idname+'v']

        maskdiv2 = allitems['mask2_'+idname+'h']
        maskdiv2_dev = allitems['mask2_'+idname+'v']

        allitems['div1vline'].style.display = 'none';
        allitems['div2vline'].style.display = 'none';

        width = 436;
        height = 300;
    }
    else
    {
        divname = idname + 'v';
        div = allitems['div'+idname+'v']
        div1 = allitems['div'+idname+'h']

        maskdiv1 = allitems['mask1_'+idname+'v']
        maskdiv1_dev = allitems['mask1_'+idname+'h']

        maskdiv2 = allitems['mask2_'+idname+'v']
        maskdiv2_dev = allitems['mask2_'+idname+'h']

        width = 370;
        height = 555;
        allitems['div'+idname+'vline'].style.display = 'block';
    }

    div.style.display = 'block';
    div1.style.display = 'none';
    maskdiv1.style.display = 'block';
    maskdiv1_dev.style.display = 'none';
    maskdiv2.style.display = 'block';
    maskdiv2_dev.style.display = 'none';

    var img = allitems['img'+divname]
    var mask1img = allitems['maskimg1_'+divname]
    var mask2img = allitems['maskimg2_'+divname]

    img.src = Onload_imgs_url[image_url_index];
    mask1img.src = Onload_imgs_url[image_url_index];
    mask2img.src = Onload_imgs_url[image_url_index];

    // console.log(img.src);

    if(img_bili > (width/height))
    {
        img.style.top = '0px';
        img.style.height = height + 'px';
        img.style.width = height*img_bili + 'px';
        img.style.left = -((height*img_bili-width)/2)+'px';

        mask1img.style.left = mask2img.style.left = img.style.left;
        mask1img.style.top = mask2img.style.top = img.style.top;
        mask1img.style.width = mask2img.style.width = img.style.width;
        mask1img.style.height = mask2img.style.height = img.style.height;
    }
    else
    {
        img.style.left = '0px';
        img.style.width = width+'px';
        img.style.height = width/img_bili + 'px';
        img.style.top = -((width/img_bili-height)/2) + 'px';

        mask1img.style.left = mask2img.style.left = img.style.left;
        mask1img.style.top = mask2img.style.top = img.style.top;
        mask1img.style.width = mask2img.style.width = img.style.width;
        mask1img.style.height = mask2img.style.height = img.style.height;

    }

    image_url_index++;
    if(image_url_index==Onload_imgs_url.length)
        image_url_index = 0;
}
call_me(load_images);
function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{
    for(var i=0;i<timeout.length;i++)
    {
        clearTimeout(timeout[i]);
    }
    var divid = ['san','wordbg','worddiv','div1','div2','div1h','div1v','div2h','div2v','div1vline','div2vline','mask1_1h','mask2_1h','maskimg1_1h','maskimg2_1h','mask1_1v','mask2_1v','maskimg1_1v','maskimg2_1v','mask1_2h','mask2_2h','maskimg1_2h','maskimg2_2h','mask1_2v','mask2_2v','maskimg1_2v','maskimg2_2v'];
    for(var i=0;i<divid.length;i++)
    {
        console.log(divid[i]);
        var div = id(divid[i]);
        div.style.webkitAnimation = '';
    }
    id('pagetitle').style.webkitAnimation = '';
}
</script>
